<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div class="header-container mobile-header">
      <div :style="showMobilePage?{paddingLeft: '40px'}:''" class="ellipsisOne">
        <ToolTip :content="title" style="max-width: 350px;" class="title mobile-text"/>
      </div>
      <div class="flex-1"/>
      <ListHeader v-if="!isDrawer"/>
    </div>
    <div v-loading="infoLoading" :class="{'mobile-margin-top':showMobilePage, 'drawer-style': isDrawer}" class="detail-container no-margin">
      <template v-if="!permissionDenied">
        <ProgressStep v-if="!showMobilePage" :mode="2" :step-list="stepList" :order-status="stepActiveId" :is-show-correct="false" :is-expedited="formOptions.isExpedited" />
        <explanation :explanation="explanationObj" :countdown="true" @queryProcessData="queryProcessData" />
        <div class="detail-content small-padding">
          <el-image v-if="isRevoke" :src="revokeImg" class="revoke-img"/>
          <el-form
            v-if="formOptions.config && formOptions.list"
            ref="formRef"
            :class="{'mobile-el-form': useMobileConfig}"
            :model="resultModel"
            :label-width="labelWidth"
            :label-position="labelPosition"
            label-suffix=":">
            <template v-for="(element, index) in formOptions.list">
              <div v-if="getElementShow(element)" :key="element.key">
                <el-row v-if="element.type === 'grid'" :gutter="4" :type="useMobileConfig?'':'flex'" class="scroll">
                  <template v-for="gridElement in getAllActiveElement(element.columns)">
                    <el-col :key="gridElement.key" :span="element.span || 12">
                      <FormMakeItem
                        :is-weibo-or-weixin="isWeiboOrWeixin"
                        :use-inner-upload="useInnerUpload"
                        :event-data="eventData"
                        :index="index"
                        :is-detail="!getIsEventEdit(gridElement)"
                        :form-options="formOptions"
                        :required-keys="requiredKeys.join(',')"
                        :is-in-detail="true"
                        :element="gridElement"
                        @handleFormUserSelect="handleFormUserSelect" />
                    </el-col>
                  </template>
                </el-row>
                <FormMakeItem
                  v-else
                  :is-weibo-or-weixin="isWeiboOrWeixin"
                  :use-inner-upload="useInnerUpload"
                  :process-status="processStatus"
                  :index="index"
                  :event-data="eventData"
                  :is-detail="!getIsEventEdit(element)"
                  :form-options="formOptions"
                  :required-keys="requiredKeys.join(',')"
                  :is-in-detail="true"
                  :element="element"
                  @selectHistory="selectHistory"
                  @handleFormUserSelect="handleFormUserSelect" />
              </div>
            </template>
          </el-form>
        </div>
        <!-- 流程审批 -->
        <ExamineAndApprove
          ref="examineAndApproveRef"
          :disabled="infoLoading"
          :show-print="!useMobileConfig"
          :approval-module-print-config="printConfig"
          :print-data="printData"
          :process-id="processId"
          :main-id="detailId"
          :module-id="moduleId"
          :version="version"
          :get-comments-api="getApprovalComments"
          :comment-add-api="approvalCommentAdd"
          :process-revocation-api="approvalProcessRevocation"
          :process-recall-api="approvalProcessRecall"
          :process-audit-api="approvalProcessAudit"
          :create-user="createUser"
          :is-creator-permission="isCreatorPermission"
          :business-type="BUSINESS_TYPE.APPROVAL"
          :process-type="PROCESS_TYPE.APPROVAL"
          :audit-schedule-data="auditScheduleData"
          :senders="senders"
          :default-aduitor-list="proposerUserList"
          :redirect-url="redirectUrl"
          :approval-module-type="APPROVAL_MODULE_TYPE.CUSTOM"
          :can-create-auth="canCreate"
          :required-keys="requiredKeys"
          :validate-list="formOptions.list"
          :append-to-body="isDrawer"
          :hidden-change-approval="isDrawer"
          :in-list-drawer="isDrawer"
          :form-validate="formValidate"
          detail-page-router-name="approvalModuleDetail"
          edit-page-router-name="approvalModuleEdit"
          @toBack="toBack"
          @getAuditSchedule="getAuditSchedule"
          @queryProcessData="queryProcessData"
          @setProcessData="setEvent"
          @handlePressSend="handlePressSend"
          @handleSendMsg="handleSendMsg"
          @handleSender="handleSender"
          @handleModify="handleModifyFunc"
          @handleCreateNew="handleCreateAgain"
          @handleCancelPress="handleCancelPress"
          @goNextApproveDetail="goNextApproveDetail"
          @freshCardData="freshCardData"
        >
          <el-button v-if="hasEventEdit" type="primary" size="small" class="submit-btn" @click="submitEventEdit()">保存</el-button>
        </ExamineAndApprove>
        <ding-ding-dialog
          ref="pressSendDialogRef"
          :btn1="'确认加急'"
          :btn2="'取消'"
          :show-send-checkbox="false"
          :select-with-user-load="false"
          :default-list="pressDefaultList"
          :redirect-url="redirectUrl"
          summary-title="加急原因"
          title="催办通知"
          @handelOK="toSend" />
      </template>
      <DeniedPlaceholder v-else />
    </div>
  </div>
</template>

<script>
// api
import {
  approvalDetail, getApprovalComments, approvalCommentAdd, getCommonApprovalPermissions,
  approvalProcessRevocation, approvalProcessRecall, approvalProcessAudit, editEvent, sensitiveWordsCheck
} from '@/api/approvalModule';
// components
import ProgressStep from '@/components/CreateOrder/orderDetail/step';
import ListHeader from '@/components/Common/header/listHeader';
import explanation from '@/components/Common/explanation';
import schedule from '@/mixins/schedule';
import ExamineAndApprove from '@/components/Common/ExamineAndApprove';
import FormMakeItem from '@/views/legal/process/components/formMake/components/FormMakeItem';
import PrintDataMixin from '../mixins/printData';
import SetUserRelatePostDataMixin from '../mixins/setUserRelatePostData';
// 工具函数
import { mapState } from 'vuex';
import { PROGRESS_STEP } from '@/utils/const/energy';
import { hasRouteAuth } from '@/utils/permission';
import { APPROVAL_MODULE_TYPE, INNER_ADDRESS } from '@/utils/const';
import { BUSINESS_TYPE, PROCESS_TYPE } from '@/utils/const/process';
import { forEachFormOptions } from '@/utils/formMakeUtils.js';
import { validateField, fieldPermissionJudge } from '../utils/filter.js';
import { showValidateMsg, handleRicheditorIndex, handleCreateAgain } from '../utils/index.js';
import { standardFormat } from '@/filters/date';
import revokeImg from '@/assets/auditProcess/process_status_3.png';
import { CUSTOM_PROCESS_EVENT } from '@/utils/const/process';
import { pingIpAddress } from '@/utils';
// import math from '@/utils/math';
import { decrypt } from '@/utils/secret';
import math from '@/utils/math';

export default {
  components: { ProgressStep, explanation, ExamineAndApprove, FormMakeItem, ListHeader },
  mixins: [schedule, PrintDataMixin, SetUserRelatePostDataMixin],
  props: {
    isDrawer: {
      type: Boolean,
      default: false
    },
    listParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      standardFormat,
      APPROVAL_MODULE_TYPE,
      moduleId: '',
      detailId: '',
      processId: '',
      title: '',
      resultModel: {},
      infoLoading: false,
      permissionDenied: false, // 详情页是否可查看
      formOptions: {},
      stepActiveId: PROGRESS_STEP.PENDING,
      isRevoke: false,
      requiredKeys: [],
      eventList: [], // 编译前的事件列表
      eventData: {}, // 编译后的事件对象
      processData: {// 流程信息
        list: [],
        operation: {
          auth: [],
          content: null
        }
      },
      // api
      getApprovalComments,
      approvalCommentAdd,
      approvalProcessRevocation,
      approvalProcessRecall,
      approvalProcessAudit,
      // api end
      BUSINESS_TYPE, PROCESS_TYPE,
      revokeImg,
      isCreatorPermission: false, // 是否有发起人权限
      fieldPermissions: [], // 组件可读权限
      oldElements: [],
      processStatus: '', // 流程状态
      canCreate: false, // 是否有新建权限
      useInnerUpload: false // 是否使用内网上传
    };
  },
  provide: function() {
    return {
      freshCheckLog: this.freshCheckLog
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isWeiboOrWeixin() {
      return this.title.includes('双微发文审批') || this.title.includes('双微发文审核');
    },
    stepList() {
      return [
        { name: '待提交', id: PROGRESS_STEP.PENDING },
        { name: '审批中', id: PROGRESS_STEP.UNDER_REVIEW },
        { name: '已完成', id: PROGRESS_STEP.FINISHED }
      ];
    },
    useMobileConfig() {
      return this.isDrawer || this.showMobilePage;
    },
    labelPosition() {
      if (this.formOptions.config.labelPosition === 'top') return 'top';
      return this.useMobileConfig ? 'left' : (this.formOptions.config.labelPosition || 'right');
    },
    labelWidth() {
      const formOptions = this.formOptions;
      if (formOptions.config.labelPosition === 'top') return formOptions.config.labelWidth + 'px';
      return this.useMobileConfig ? '100px' : formOptions.config.labelWidth + 'px';
    },
    createUser() {
      let user = { id: this.formOptions.creatorId, userName: this.formOptions.creator };
      if (this.userInfo.id === this.formOptions.creatorId) {
        user = this.userInfo;
      }
      return user;
    },
    proposerUserList() {
      if (!this.formOptions.list) return [];
      const user = this.formOptions.list.find(i => {
        return i.type === 'user' && i.name === '申请人';
      });
      if (!user || !user.value || !user.value.id) return [];
      return [{ id: user.value.id, userName: user.value.userName }];
    },
    redirectUrl() {
      return `/homePage/approvalModuleDetail/${this.moduleId}`;
    },
    isExamine() { // 当前用户是否是当前节点审批人
      const processList = this.processData.list;
      if (!processList || processList.length === 0) return false;
      let item = null;
      processList.forEach(i => {
        // nodeStatus 节点状态： 0：结束 1：进行中 2：未审批
        if (!item && i.nodeStatus === 1) {
          item = i;
        }
      });
      if (!item || item.length === 0) return false;
      let userList = [];
      item.items.forEach(i => {
        userList = userList.concat(i.users);
      });
      return userList.some(i => {
        return i.id === this.userInfo.id;
      });
    },
    hasEventEdit() {
      if (!this.eventData || !this.isExamine || JSON.stringify(this.eventData) === '{}' || [3, 4].includes(this.processData.processStatus)) return false;
      for (const key in this.eventData) {
        if (this.eventData[key] && this.eventData[key].editAfterId && this.formOptions.auditInfo.currentNode > this.eventData[key].editAfterId) {
          return true;
        }
      }
      return false;
    }
  },
  isWeiboOrWeixin(val) {
    if (val) {
      pingIpAddress(INNER_ADDRESS + '/common/ping').then(status => {
        this.useInnerUpload = status === true;
      }).catch(() => {
        this.useInnerUpload = false;
      });
    }
  },
  created() {
    this.initData();
    this.queryPermissions();
  },
  methods: {
    hasRouteAuth,
    handleRicheditorIndex,
    initData() {
      this.moduleId = this.isDrawer ? this.listParams.moduleId : Number(this.$route.params.moduleId);
      this.initRouteData();
      this.queryProcessData(); // 流程数据
    },
    initRouteData() {
      const detailId = this.isDrawer ? this.listParams.id : this.$route.query.id;
      const processId = this.isDrawer ? this.listParams.processId : this.$route.query.processId;
      if (detailId) this.detailId = Number(detailId);
      if (processId) this.processId = Number(processId);
      if (!this.detailId || !this.processId) {
        this.$message.warning('无法获取ID');
        const timer = setTimeout(() => {
          this.$router.back();
          clearTimeout(timer);
        }, 1500);
      }
    },
    queryProcessData() {
      this.getAuditSchedule();
      this.getDetailData();
      this.$nextTick(() => {
        this.$refs.examineAndApproveRef && this.$refs.examineAndApproveRef.getProcessList();
      });
    },
    selectHistory(data) {
      this.formOptions.list.forEach(it => {
        if (it.key === data.key) {
          it.value.forEach(ele => {
            if (ele._id === data.rowId) {
              ele = Object.assign(ele, data);
              ele._id = data.rowId;
            }
          });
        }
      });
    },
    getDetailData() {
      this.infoLoading = true;
      approvalDetail({ id: this.detailId }).then(res => {
        this.handleProcessCheck(res.data.processId);
        if (res.code === 200) {
          res.data._initDetail = true;
          this.title = res.data.moduleName;
          this.isCreatorPermission = res.data.isCreatorPermission;
          if (res.data.processStatus === 3) { // 3为撤销
            this.stepActiveId = PROGRESS_STEP.PENDING;
            this.isRevoke = true;
          } else {
            this.stepActiveId = res.data.processStatus;
            this.isRevoke = false;
          }
          this.processStatus = res.data.processStatus;
          res.data.moduleId = this.moduleId;
          res.data.detailId = this.detailId;
          res.data.processId = this.processId;
          this.oldElements = JSON.parse(JSON.stringify(res.data.list));
          const isCreator = res.data.creatorId === this.userInfo.id;
          forEachFormOptions(res.data.list, (i, k, parentSubform) => {
            // 初始化解密
            if (i.options && i.options.isSecret) {
              if (i.options.createShowValue && (this.isExamine || isCreator)) {
                i._isShowSecret = true;
                this.decryptField(i, parentSubform);
              } else {
                i._isShowSecret = false;
              }
            }
          });
          this.formOptions = res.data;
          this.version = res.data.version;// 详情版本
          this.postFollowerData = res.data.config.postFollowerData || {};
          if (this.processStatus !== 3) {
            this.handleEventSet();
          }
          const permissionsSetting = this.formOptions.permissions || [];
          this.setFieldPermissionsToStore(permissionsSetting);
          this.toUpdateRecord();// 获取版本修改记录
          setTimeout(() => {
            this.handleRicheditorIndex();
            this.setEventData(this.formOptions.list);
          }, 0);
          setTimeout(() => {
            this.formOptions._initDetail = false;
          }, 600);
        }
        this.infoLoading = false;
      }).catch(err => {
        if (err.code === 403) {
          this.permissionDenied = true;
        }
        this.infoLoading = false;
        // testData.creatorId = this.userInfo.id;
        // testData.creator = this.userInfo.userName;
        // this.formOptions = testData;
      });
    },
    handleModifyFunc() {
      const query = {
        remodifyId: this.processId,
        id: this.detailId
      };
      if (this.requiredKeys.length) {
        query.requiredKeys = this.requiredKeys.join(',');
      }
      this.handleModify('approvalModuleEdit', { moduleId: this.moduleId }, query);
    },
    toBack() {
      if (this.isDrawer) {
        this.$emit('toBack');
        return;
      }
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({ name: 'approvalList', params: { id: this.moduleId }});
      }
    },
    freshCardData({ id, processId } = {}) {
      if (!this.isDrawer) return;
      const data = {
        moduleId: this.moduleId,
        id: id || this.detailId,
        processId: processId || this.processId
      };
      this.$emit('freshCardData', data);
    },
    goNextApproveDetail({ id, processId }) {
      this.$emit('goNextApproveDetail', { moduleId: this.moduleId, id, processId, detailId: this.detailId });
    },
    getAuditSchedule() {
      this.requestAuditSchedule(this.processId);
    },
    /**
     * 事件处理
     */
    setEvent(data) {
      this.processData = data;
      this.$nextTick(() => {
      // 因为需要更新 processData 后才知道当前用户是否为审批人，所以在这里要加判断
        if (this.formOptions && this.formOptions.list) {
          const isCreator = this.formOptions.creatorId === this.userInfo.id;
          forEachFormOptions(this.formOptions.list, (i, k, parentSubform) => {
          // 初始化解密
            if (i.options && i.options.isSecret && i.options.createShowValue && (this.isExamine || isCreator)) {
              i._isShowSecret = true;
              this.decryptField(i, parentSubform);
            } else {
              i._isShowSecret = false;
            }
          });
        }
      });
      this.eventList = data.operation.event || [];
      if (!_.isEmpty(this.eventData) && data.operation.currentNodeId) {
        if (data.processStatus === 3) {
          this.$nextTick(() => {
            this.eventData = {};
            this.requiredKeys = [];
          });
        }
        const eventData = this.eventData;
        Object.keys(eventData).map(key => {
          if ((eventData[key].requiredAfterId && eventData[key].requiredAfterId >= data.operation.currentNodeId)) {
            this.requiredKeys = [];
          }
        });
      }
      if (_.isEmpty(this.eventData)) {
        this.requiredKeys = [];
      }
      if ([2, 3, 4].includes(data.processStatus)) {
        this.requiredKeys = [];
      }
      if (data.processStatus === 2 || data.processStatus === 3) {
        this.eventData = {};
        this.requiredKeys = [];
        return;
      }
      this.setEventData(this.formOptions.list);
    },
    setEventData(list) {
      /**
       * 获取事件数据
       * eventData = {
       *   [key]: {hide, isEventEdit}
       * }
       */
      // 事件权重 填写 > 隐藏 > 显示
      if (!list || !this.isExamine || this.eventList.length === 0) {
        return;
      }
      list.forEach(element => {
        this.setValue(element);
        if (element.type === 'grid' && element.columns.length) {
          element.columns.forEach(gridElement => {
            if (gridElement.list && gridElement.list.length) {
              this.setEventData(gridElement.list);
            }
          });
        }
      });
      this.$forceUpdate();
    },
    getMaxId(arr, key) {
      let maxId = arr[0][key];
      let maxIdObj = arr[0];
      for (let i = 1; i < arr.length; i++) {
        if (arr[i][key] > maxId) {
          maxId = arr[i][key];
          maxIdObj = arr[i];
        }
      }
      return maxIdObj;
    },
    // 取最高优先级事件
    eventFilter(list) {
      const result = _.cloneDeep(list);
      if (result.length) {
        this.formOptions.list.map(it => {
          const curArr = result.filter(item => item.target.includes(it.key));
          if (curArr.length && curArr.length > 1) {
            const curObj = this.getMaxId(curArr, 'operate');
            result.forEach(item => {
              const targets = item.target.split(',');
              targets.map(tg => {
                if (curObj.target.includes(tg) && item.operate !== curObj.operate) {
                  item.target = item.target.split(',').filter(i => i !== tg).join(',');
                }
              });
            });
          }
        });
      }
      return result;
    },
    handleEventSet() {
      const { currentNode } = this.formOptions.auditInfo;
      this.formOptions.auditInfo.process.map(it => {
        if (it.eventList && it.eventList.length && ((!currentNode && this.formOptions.processStatus) || it.id <= currentNode)) {
          const { event } = this.formOptions;
          const preEvent = event.filter(i => it.eventList.includes(i.id));
          const eventList = this.eventFilter(preEvent).filter(el => !!el.target);
          const elementList = _.cloneDeep(this.formOptions.list);
          elementList.map(ele => {
            if (ele.type === 'grid' && ele.columns.length) {
              ele.columns.map(col => {
                if (col.list && col.list.length) {
                  col.list.map(j => {
                    elementList.push(j);
                  });
                }
              });
            }
          });
          eventList.length && eventList.forEach(e => {
            let targets = e.target.split(',');
            targets.map(v => {
              const element = elementList.find(it => it.key === v);
              const judge = fieldPermissionJudge(element, this.fieldPermissions);
              if (!judge) {
                targets = targets.filter(v => v !== element.key);
                e.target = targets.join(',');
              }
            });
          });
          if (eventList.length) {
            eventList.map(el => {
              if (el.target) {
                const targets = el.target.split(',');
                switch (el.operate) {
                  case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_HIDE:
                    targets.map(v => {
                      if (!this.eventData[v]) this.$set(this.eventData, v, {});
                      // this.eventData[v].hide = true; // 详情页隐藏
                      this.eventData[v].hideAfterId = it.id - 1;
                      if (this.eventData[v].showAfterId) delete this.eventData[v].showAfterId;
                      if (this.eventData[v].editAfterId) delete this.eventData[v].editAfterId;
                      if (this.eventData[v].requiredAfterId) delete this.eventData[v].requiredAfterId;
                      if (this.eventData[v].readOnlyAfterId) delete this.eventData[v].readOnlyAfterId;
                      if (this.requiredKeys.length && this.requiredKeys.includes(v)) {
                        this.requiredKeys = this.requiredKeys.filter(keys => keys !== v);
                      }
                    });
                    break;
                  case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_DISPLAY:
                    targets.map(v => {
                      if (!this.eventData[v]) this.$set(this.eventData, v, {});
                      this.eventData[v].showAfterId = it.id - 1;
                      if (this.eventData[v].isEventEdit) delete this.eventData[v].isEventEdit;
                      if (this.eventData[v].hideAfterId) delete this.eventData[v].hideAfterId;
                      if (this.eventData[v].editAfterId) delete this.eventData[v].editAfterId;
                      if (this.eventData[v].requiredAfterId) delete this.eventData[v].requiredAfterId;
                      if (this.eventData[v].readOnlyAfterId) delete this.eventData[v].readOnlyAfterId;
                      if (this.requiredKeys.length && this.requiredKeys.includes(v)) {
                        this.requiredKeys = this.requiredKeys.filter(keys => keys !== v);
                      }
                      const element = elementList.find(it => it.key === v);
                      if (element) {
                        this.eventData[v].hide = this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide);
                      }
                    });
                    break;
                  case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_ENABLE:
                    targets.map(v => {
                      if (!this.eventData[v]) this.$set(this.eventData, v, {});
                      // this.eventData[v].isEventEdit = true;
                      this.eventData[v].editAfterId = it.id - 1;
                      if (this.eventData[v].hideAfterId) delete this.eventData[v].hideAfterId;
                      if (this.eventData[v].showAfterId) delete this.eventData[v].showAfterId;
                      if (this.eventData[v].requiredAfterId) delete this.eventData[v].requiredAfterId;
                      if (this.eventData[v].readOnlyAfterId) delete this.eventData[v].readOnlyAfterId;
                      if (this.requiredKeys.length && this.requiredKeys.includes(v)) {
                        this.requiredKeys = this.requiredKeys.filter(keys => keys !== v);
                      }
                      const element = elementList.find(it => it.key === v);
                      if (element) {
                        if (element.options && element.options.readonly) {
                          forEachFormOptions(this.formOptions.list, item => {
                            if (item.key === v || item.linkFormKey === v) {
                              if (item.options.hasOwnProperty('readonly')) item.options.readonly = false;
                            }
                          });
                        }
                        this.eventData[v].hide = this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide);
                        if (element.type === 'subform' && element.subform) {
                          element.subform.forEach(i => {
                            if (i.options && i.options.isSecret) {
                              this.decryptField(i, element);
                            }
                          });
                        } else if (element.options && element.options.isSecret) {
                          this.decryptField(element);
                        }
                      }
                    });
                    break;
                  case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_REQUIRED:
                    targets.map(v => {
                      if (!this.eventData[v]) this.$set(this.eventData, v, {});
                      this.eventData[v].hide = false;
                      this.eventData[v].requiredAfterId = it.id - 1;
                      const element = elementList.find(it => it.key === v);
                      this.eventData[v].editAfterId = it.id - 1;
                      if (this.eventData[v].hideAfterId) delete this.eventData[v].hideAfterId;
                      if (this.eventData[v].showAfterId) delete this.eventData[v].showAfterId;
                      if (this.eventData[v].readOnlyAfterId) delete this.eventData[v].readOnlyAfterId;
                      if (this.requiredKeys.indexOf(v) === -1) {
                        this.requiredKeys.push(v);
                      }
                      if (element) {
                        if (element.options && element.options.readonly) {
                          forEachFormOptions(this.formOptions.list, item => {
                            if (item.key === v || item.linkFormKey === v) {
                              if (item.options.hasOwnProperty('readonly')) item.options.readonly = false;
                            }
                          });
                        }
                        this.eventData[v].hide = this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide);
                        if (element.type === 'subform' && element.subform) {
                          element.subform.forEach(i => {
                            if (i.options && i.options.isSecret) {
                              this.decryptField(i, element);
                            }
                          });
                        } else if (element.options && element.options.isSecret) {
                          this.decryptField(element);
                        }
                      }
                    });
                    break;
                  case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_READ_ONLY:
                    targets.map(v => {
                      if (!this.eventData[v]) this.$set(this.eventData, v, {});
                      this.eventData[v].readOnlyAfterId = it.id - 1;
                      if (this.eventData[v].isEventEdit) delete this.eventData[v].isEventEdit;
                      if (this.eventData[v].hideAfterId) delete this.eventData[v].hideAfterId;
                      if (this.eventData[v].editAfterId) delete this.eventData[v].editAfterId;
                      if (this.eventData[v].requiredAfterId) delete this.eventData[v].requiredAfterId;
                      if (this.eventData[v].showAfterId) delete this.eventData[v].showAfterId;
                      if (this.requiredKeys.length && this.requiredKeys.includes(v)) {
                        this.requiredKeys = this.requiredKeys.filter(keys => keys !== v);
                      }
                      const element = elementList.find(it => it.key === v);
                      if (element) {
                        this.eventData[v].hide = this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide);
                      }
                    });
                    break;
                  // case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_HIDE_AFTER_APPROVE:
                  //   targets.map(v => {
                  //     if (!this.eventData[v]) this.$set(this.eventData, v, {});
                  //     const element = elementList.find(it => it.key === v);
                  //     const res = {
                  //       ...this.eventData[v],
                  //       hideAfterId: this.eventData[v].hideAfterId || it.id,
                  //       hide: this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide)
                  //     };
                  //     this.$set(this.eventData, v, { ...res });
                  //   });
                  //   break;
                  // case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_SHOW_AFTER_APPROVE:
                  //   targets.map(v => {
                  //     if (!this.eventData[v]) this.$set(this.eventData, v, {});
                  //     const element = elementList.find(it => it.key === v);
                  //     const res = {
                  //       ...this.eventData[v],
                  //       showAfterId: this.eventData[v].showAfterId || it.id,
                  //       hide: this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide)
                  //     };
                  //     this.$set(this.eventData, v, { ...res });
                  //   });
                  //   break;
                  // case CUSTOM_PROCESS_EVENT.TURN_ON_FIELD_ENABLE_AFTER_APPROVE:
                  //   targets.map(v => {
                  //     if (!this.eventData[v]) this.$set(this.eventData, v, {});
                  //     const element = elementList.find(it => it.key === v);
                  //     const res = {
                  //       editAfterId: this.eventData[v].editAfterId || it.id,
                  //       hide: this.eventData[v].hide || this.validateField(element) !== null ? !this.validateField(element) : (element.options && element.options.detailHide)
                  //     };
                  //     this.$set(this.eventData, v, { ...res });
                  //   });
                  //   break;
                }
              }
            });
          }
        }
      });
    },
    setValue(element) {
      const noValue = ['title', 'grid', 'titleExplain'];
      if (element && !noValue.includes(element.type) && !Object.hasOwnProperty.call(element, 'value')) {
        let multiple = false;
        if (element.options && element.options.multiple) {
          multiple = true;
        }
        this.$set(element, 'value', multiple ? [] : '');
      }
    },
    // 保存当前用户所有可读字段权限的判断结果
    setFieldPermissionsToStore(list) {
      const allFieldPermissions = [];
      if (Array.isArray(list) && list.length) {
        list.forEach(item => {
          const hasFieldPermission = this.getRowFieldPermission(item);
          hasFieldPermission && allFieldPermissions.push(...item.fieldPermissions.split(','));
        });
      }
      this.fieldPermissions = [...new Set(allFieldPermissions)];
    },
    // 判断当前用户是否有字段可读权限
    getRowFieldPermission(data) {
      if (!data.fieldPermissions) return false;
      if (data.isSelectAll) return true;
      let result = false;
      if (Array.isArray(data.members) && data.members.length) {
        result = data.members.some(member => member.id === this.userInfo.id);
      }
      if (!result && Array.isArray(this.userInfo.currentDeptIds) && data.deptList) {
        result = data.deptList.split(',').some(deptId => this.userInfo.currentDeptIds.includes(Number(deptId)));
      }
      if (!result && data.postList) {
        result = data.postList.split(',').some(post => post === this.userInfo.post);
      }
      if (!result && Array.isArray(data.roleGroup) && data.roleGroup.length) {
        result = data.roleGroup.some(roleId => this.userInfo.roleGroupIds.includes(Number(roleId)));
      }
      return result;
    },
    getAllActiveElement(list = []) {
      const elementArr = [];
      let maxColLength = 0;
      list && list.forEach(colData => {
        maxColLength = Math.max(maxColLength, colData.list.length || 0);
      });
      for (let colIndex = 0; colIndex < maxColLength; colIndex++) {
        list.forEach(colData => {
          if (Array.isArray(colData.list) && colData.list.length > colIndex && this.getElementShow(colData.list[colIndex])) {
            elementArr.push(colData.list[colIndex]);
          }
        });
      }
      return elementArr;
    },
    getElementShow(element) {
      const { currentNode } = this.formOptions.auditInfo;
      // 权重：字段权限＞流程事件＞字段显隐条件＞字段属性
      if (!fieldPermissionJudge(element, this.fieldPermissions)) {
        return false;
      } else if (this.eventData[element.key] && !this.isExamine && !currentNode) {
        const eventData = this.eventData;
        if (eventData[element.key].showAfterId ||
          eventData[element.key].editAfterId ||
          eventData[element.key].isEventEdit ||
          eventData[element.key].readOnlyAfterId ||
          (eventData[element.key].hide === false && !eventData[element.key].hideAfterId)) {
          return true;
        } else if (eventData[element.key].hideAfterId || eventData[element.key].hide) {
          return false;
        }
      } else if (this.eventData[element.key] && this.isExamine) {
        const eventData = this.eventData;
        // 显示
        if (eventData[element.key].hideAfterId && currentNode > eventData[element.key].hideAfterId) {
          return false;
        } else if (
          (eventData[element.key].editAfterId && currentNode > eventData[element.key].editAfterId) ||
          (eventData[element.key].showAfterId && currentNode > eventData[element.key].showAfterId) ||
          (eventData[element.key].readOnlyAfterId && currentNode > eventData[element.key].readOnlyAfterId) ||
          !eventData[element.key].hide) {
          return true;
        }
      } else if (this.validateField(element) !== null) {
        return this.validateField(element);
      } else {
        return !element.options || !element.options.detailHide;
      }
    },
    // 判断组件是否可以展示
    validateField(element) {
      // 权重：字段权限＞流程事件＞字段显隐条件＞字段属性
      return validateField(element, this.formOptions, this.processStatus);
    },
    getIsEventEdit(element) {
      const eventData = this.eventData;
      if (eventData[element.key] && this.isExamine) {
        if (eventData[element.key].editAfterId && this.formOptions.auditInfo.currentNode > eventData[element.key].editAfterId) {
          return true;
        }
        return eventData[element.key].isEventEdit;
      }
      return false;
    },
    // 监听所有人员选择组件变化
    handleFormUserSelect(data) {
      // 获取当前变化人员的职位映射
      const postArr = this.postFollowerData[data.key] || [];
      // 对应关联职位字段是否启用填写
      const isEditPostArr = postArr.filter(item => this.getIsEventEdit(item));
      isEditPostArr.length && this.setCurrUserPostToPostField(data, isEditPostArr);
    },
    // 表单对比
    formCompared(oldEditElements, newEditElements) {
      const baseModifyList = [];
      const subModifyList = [];
      const subList = [];
      const types = ['subform', 'associatedApproval', 'linkForm'];
      const linkFormType = ['associatedApproval', 'linkForm'];
      forEachFormOptions(oldEditElements, (oldElement) => { // 存储基础字段的修改
        if (!types.includes(oldElement.type)) {
          const newElement = newEditElements.find(el => el.key === oldElement.key);
          const { key, name, type } = oldElement;
          if (this.isModifyField(oldElement, newElement)) {
            baseModifyList.unshift({
              key,
              oldValue: this.handleValue(oldElement),
              newValue: this.handleValue(newElement),
              name,
              isSecret: oldElement.options.isSecret,
              type: 2, // 1新增 2修改 3删除，基础字段仅有修改类型
              fieldType: type
            });
          }
        } else {
          subList.push(oldElement);
        }
      }, { notForEachSubform: true });
      // 处理列表类型
      subList.map(el => {
        const item = {
          key: el.key,
          name: el.name,
          rowModifyList: [],
          formChangeList: []
        };
        const newItem = newEditElements.find(j => j.key === el.key);
        if (linkFormType.includes(el.type) && this.isFormModify(el, newItem)) {
          item.formChangeList = this.linkFormModify(el, newItem);
        }
        if (el.type === 'subform' && this.isObjModify(el.value, newItem.value)) {
          const { rowModifyList, formChangeList } = this.subFormModify(el, newItem);
          item.rowModifyList = rowModifyList;
          item.formChangeList = formChangeList;
        }
        if (item.rowModifyList.length || item.formChangeList.length) {
          subModifyList.push(item);
        }
      });
      return {
        baseModifyList,
        subModifyList,
        version: this.version,
        modifyNodeId: this.modifyNodeId
      };
    },
    // 子表单变更
    subFormModify(oldElement, newItem) {
      const rowModifyList = [];
      const formChangeList = [];
      const oldVal = oldElement.value;
      const newVal = newItem.value;
      newVal.map(el => { // 新增行
        if (!oldVal.find(i => i._id === el._id)) {
          formChangeList.push({
            row: newVal.findIndex(j => j === el) + 1,
            content: JSON.stringify(el),
            type: 1
          });
        }
      });
      oldVal.map(el => {
        const findItem = newVal.find(i => i._id === el._id);
        if (!findItem) { // 删除行
          formChangeList.push({
            row: oldVal.findIndex(j => j === el) + 1,
            content: JSON.stringify(el),
            type: 3
          });
        }
        if (findItem && this.isObjModify(findItem, el)) { // 修改行
          const item = {
            fieldList: [],
            row: oldVal.findIndex(j => !this.isObjModify(j, el)) + 1
          };
          Object.keys(el).map(key => {
            if (this.isObjModify(decrypt(el[key], {}), findItem[key])) {
              const subElement = this.getSubField(oldElement, key);
              item.fieldList.push({
                key,
                oldValue: this.handleValue({ ...subElement, value: el[key] }),
                newValue: this.handleValue({ ...subElement, value: findItem[key] }),
                isSecret: subElement.options.isSecret,
                name: subElement.name,
                fieldType: subElement.type
              });
            }
          });
          if (item.fieldList.length) { rowModifyList.push(item); }
        }
      });
      return { rowModifyList, formChangeList };
    },
    getSubField(element, key) {
      const subform = element.subform;
      return subform.find(el => el.key === key) || {};
    },
    // 关联类表单变更
    linkFormModify(oldElement, newItem) {
      const formChangeList = [];
      let oldVal = this.handleFormValue(oldElement);
      let newVal = this.handleFormValue(newItem);
      oldVal = oldVal ? oldVal.split(',') : [];
      newVal = newVal ? newVal.split(',') : [];
      newVal.map(el => { // 新增行
        if (!oldVal.find(i => i === el)) {
          formChangeList.push({
            row: newVal.findIndex(j => j === el) + 1,
            content: JSON.stringify(el),
            type: 1
          });
        }
      });
      oldVal.map(el => { // 删除行
        if (!newVal.find(i => i === el)) {
          formChangeList.push({
            row: oldVal.findIndex(j => j === el) + 1,
            content: JSON.stringify(el),
            type: 3
          });
        }
      });
      return formChangeList;
    },
    isObjModify(oldVal, newVal) { // 字表单是否修改
      return JSON.stringify(oldVal) !== JSON.stringify(newVal);
    },
    isFormModify(oldElement, newElement) { // 关联类型的列表是否修改
      const oldVal = this.handleFormValue(oldElement);
      const newVal = this.handleFormValue(newElement);
      return oldVal !== newVal;
    },
    handleFormValue(element, key = 'id') {
      return Array.isArray(element.value) ? element.value.map(el => el[key] ? el[key] : el).join(',') : element.value;
    },
    isModifyField(oldElement, newElement) { // 字段是否修改
      const type = oldElement.type;
      if (!oldElement.value && oldElement.value !== 0)oldElement.value = '';
      if (!newElement.value && newElement.value !== 0)newElement.value = '';
      if (Array.isArray(oldElement.value) || Array.isArray(newElement.value)) {
        let oldVal = '';
        let newVal = '';
        let keyName = 'name';
        if (type === 'user') { keyName = 'userName'; }
        oldVal = this.handleFormValue(oldElement, keyName);
        newVal = this.handleFormValue(newElement, keyName);
        return oldVal !== newVal;
      } else {
        if (type === 'user') {
          return oldElement.value.userName !== newElement.value.userName;
        }
        if (type === 'department' || type === 'post') {
          return oldElement.value.name !== newElement.value.name;
        }
        return oldElement.value !== newElement.value;
      }
    },
    handleValue(element) { // 值处理
      const multiple = element.options.multiple || false;
      if (element.options && element.options.isSecret) {
        element.value = decrypt(element.value, element);
      }
      if (element.type === 'user') {
        return multiple ? element.value.map(e => e.userName).join(',') : element.value && element.value.userName;
      }
      if (element.type === 'switch') {
        return element.value ? '开' : '关';
      }
      if (element.type === 'date') {
        return this.standardFormat(element.value / 1000, this.getFormat(element.options.format));
      }
      if (Array.isArray(element.value)) {
        if (element.type === 'address') {
          return element.value.join('-');
        }
        return element.value.map(e => e.name ? e.name : e).join(',');
      }
      if (element.type === 'department' || element.type === 'post') {
        return element.value && element.value.name;
      }
      return element.value;
    },
    getFormat(format) {
      if (!format) return 'YYYY/MM/DD HH:mm:ss';
      format = format.replace('yyyy', 'YYYY');
      format = format.replace('dd', 'DD');
      return format;
    },
    // 获取旧的开启编辑事件的组件数据
    getOldEditElements() {
      const oldElements = JSON.parse(JSON.stringify(this.oldElements));
      const oldEditElements = [];
      forEachFormOptions(oldElements, (element) => {
        const isSecret = element.options && element.options.isSecret;
        if (isSecret) { // 统一进行解密
          element.value = decrypt(element.value, element);
        }
        if ((this.getIsEventEdit(element) || element.type === 'formulaInput') && !element.isSubTable) {
          oldEditElements.push(element);
        }
      }, { notForEachSubform: false });
      return oldEditElements;
    },
    // 更新版本记录
    toUpdateRecord() {
      this.$refs.examineAndApproveRef.toUpdateRecord();
    },
    // 敏感词校验
    async sensitiveWordsCheck(callback) {
      return new Promise((resolve, reject) => {
        const { list } = _.cloneDeep(this.formOptions);
        if (!list) return;
        const fitList = [];
        forEachFormOptions(list, (element) => {
          // 过滤不可编辑组件,子表单由后端进行处理
          const types = ['textarea', 'input', 'richEditor', 'subform'];
          if (types.includes(element.type) && this.getIsEventEdit(element)) {
            fitList.push(element);
          }
        }, { notForEachSubform: true });
        sensitiveWordsCheck({ list: fitList }).then(res => {
          if (res.code === 200) {
            try {
              callback && callback();
              resolve(true);
            } catch (_) {
              reject(false);
            }
          }
        }).catch((err) => {
          if (err.code === 504 && err.data) {
            reject(false);
            showValidateMsg(err.data);
          }
          if (err.code === 608 && err.data) {
            showValidateMsg(err.data, { showCancelButton: true, catchReject: true, customClass: 'del-message-cancel del-message' }, () => {
              try {
                callback && callback();
                resolve(true);
              } catch (_) {
                reject(false);
              }
            }, () => {
              reject(false);
            });
          }
        });
      });
    },
    submitEventEdit() {
      setTimeout(() => {
        this.editEvent(true, true).then(res => {
          this.getDetailData();
          // 需要刷新底部按钮
          this.$refs['examineAndApproveRef'] && this.$refs['examineAndApproveRef'].getProcessList();
        });
      }, 100);
    },
    removePreview(list) {
      forEachFormOptions(list, (i) => {
        if (i.type === 'upAttachment' && i.value) {
          i.value = i.value.filter(item => item.type !== 'preview');
        }
      });
    },
    editEvent(showMsg, isNodeSave = false, throwError = false) {
      return new Promise(async(resolve, reject) => {
        if (throwError) {
          return reject(false);
        }
        this.removePreview(this.formOptions.list);
        const formOptions = _.cloneDeep(this.formOptions);
        const ans = [];
        forEachFormOptions(formOptions.list, (element) => {
          if (this.getIsEventEdit(element) || element.type === 'formulaInput') {
            if (element.key) this.resultModel[element.key] = element.value;
            if (element.type === 'subform') {
              Object.keys(this.eventData).map(i => {
                if (i === element.key) isNodeSave = false;
              });
            }
            ans.push(element);
          }
        }, { notForEachSubform: true });
        const modifyItem = this.formCompared(this.getOldEditElements(), ans);// 对比修改
        const res = await approvalDetail({ id: this.detailId });// 获取最新版本号/
        if (res.code === 200) {
          modifyItem.version = res.data.version;
        }
        this.$refs.formRef.validate(async(valid) => {
          if (!modifyItem.baseModifyList.length && !modifyItem.subModifyList.length && isNodeSave) {
            this.$message.error('表单未发生修改');
            return reject('false');
          }
          if (valid) {
            const sensitiveWordsCheck = await this.sensitiveWordsCheck();
            if (!sensitiveWordsCheck) {
              reject(false);
              return;
            }
            this.editElement(ans, modifyItem).then(res => {
              resolve(res);
              if (showMsg) this.$message.success('保存成功');
              this.freshCardData();
            });
          } else {
            reject('请检查信息是否填写完整');
            this.$message.error('请检查信息是否填写完整');
          }
        });
      });
    },
    formValidate() {
      return new Promise((resolve, reject) => {
        this.editEvent(false, false).then(res => {
          this.getDetailData();
          // 需要刷新底部按钮
          this.$refs['examineAndApproveRef'] && this.$refs['examineAndApproveRef'].getProcessList();
          this.freshCardData();
          resolve(true);
        }).catch(err => {
          console.log(err);
          reject(false);
        });
      });
    },
    async editElement(ans, modifyItem) {
      await this.validateTable(ans);
      await this.validateSubForm(ans);
      await this.validateAssociatedApproval(ans);
      // 关联审批类型需要调整提交的格式
      ans.forEach(item => {
        if (item.type === 'associatedApproval' && Array.isArray(item.value)) {
          if (item.value.length) {
            item.value = item.value.map(item => item.id).join();
          } else {
            item.value = '';
          }
        }
        if (item.type === 'input' && item.options.isShowPercentage) {
          item.value = item.value || item.value === 0 ? math.divide(item.value, 100) : '';
        }
        if (item.type === 'subform' && item.subform && item.value) {
          item.subform.forEach(i => {
            if (i.type === 'input' && i.options.isShowPercentage) {
              item.value.forEach(val => {
                val[i.key] = val[i.key] || val[i.key] === 0 ? math.divide(val[i.key], 100) : '';
              });
            }
          });
        }
        /* if (item.type === 'input' && item.dataType === 'number' && !item.value && item.options.defaultType === 0) {
          item.value = 0;
        } */
      });
      const params = {
        id: this.detailId,
        moduleId: this.moduleId,
        list: ans,
        modifyItem
      };

      return new Promise((resolve, reject) => {
        if (!ans.length) {
          resolve({ code: 200 });
          return;
        }
        editEvent(params).then(res => {
          if (res.code === 200) {
            resolve(res);
          } else {
            this.$message.error(res.message);
            reject(res);
          }
        }).catch((err) => {
          if (err.code === 504 && err.data) {
            showValidateMsg(err.data);
          }
          reject({ message: '请求失败' });
        });
      });
    },
    validateTable(list) {
      return new Promise((resolve, reject) => {
        let isError = false;
        list.forEach(i => {
          if ((i.type === 'subform' || i.type === 'linkForm') && (i.options.required || (this.requiredKeys && this.requiredKeys.includes(i.key)))) {
            if (!i.value || i.value.length === 0) {
              isError = `${i.name}不能为空`;
            }
          }
        });
        if (isError) {
          reject(isError);
          this.$message.error(isError);
        } else {
          resolve(true);
        }
      });
    },
    validateSubForm(list) {
      return new Promise((resolve, reject) => {
        let isError = false;
        let name = '';
        let errorkey = '';
        list.forEach(k => {
          if (k.type === 'subform' && k.value && k.value.length) {
            k.subform.forEach(i => {
              if (i.options.required || (this.requiredKeys && this.requiredKeys.includes(i.key))) {
                k.value.forEach(j => {
                  const isNull = j[i.key] === null || j[i.key] === undefined;
                  const isArray = Array.isArray(j[i.key]) && j[i.key].length === 0;
                  const isObject = typeof j[i.key] === 'object' && !Array.isArray(j[i.key]) && JSON.stringify(j[i.key]) === '{}';
                  const isStr = typeof j[i.key] !== 'object' && !j[i.key] && j[i.key] !== 0;
                  if (isNull || isStr || isArray || isObject) {
                    isError = true;
                    name = k.name;
                    errorkey = i.name;
                  }
                });
              }
            });
          }
        });
        if (isError) {
          reject(`${name}中的${errorkey}为必填`);
          this.$message.error(`${name}中的${errorkey}为必填`);
        } else {
          resolve(true);
        }
      });
    },
    validateAssociatedApproval(list) {
      return new Promise((resolve, reject) => {
        let isError = false;
        list.forEach(i => {
          if ((i.type === 'associatedApproval') && (i.options.required || (this.requiredKeys && this.requiredKeys.includes(i.key)))) {
            if (!i.value || i.value.length === 0) {
              isError = `请添加${i.name}`;
            }
          }
        });
        if (isError) {
          reject(isError);
          this.$message.error(isError);
        } else {
          resolve(true);
        }
      });
    },
    decryptField(element, parentSubform) {
      if (parentSubform && parentSubform.value) {
        // 子表单 解密
        parentSubform.value.forEach(subform => {
          subform[element.key] = decrypt(subform[element.key], element);
        });
      } else {
        // 正常字段 解密
        element.value = decrypt(element.value, element);
      }
    },
    freshCheckLog() {
      if (this.$refs.examineAndApproveRef) this.$refs.examineAndApproveRef.getCheckFieldLog();
    },
    handleCreateAgain() {
      if (this.formOptions.isNewTemplate) {
        this.handleCreateNew('approvalModuleEdit', { moduleId: this.moduleId }, { id: this.detailId });
        return;
      }
      const createNew = () => {
        const routeUrl = this.$router.resolve({
          name: 'approvalModuleCreate',
          params: { moduleId: this.formOptions.newModuleId }
        });
        window.open(routeUrl.href, '_blank');
      };
      const createOld = () => {
        this.handleCreateNew('approvalModuleEdit', { moduleId: this.moduleId }, { id: this.detailId });
      };
      handleCreateAgain(createNew, createOld, this.$createElement);
    },
    // 设置页面操作对应权限
    queryPermissions() {
      getCommonApprovalPermissions(this.moduleId).then(res => {
        if (res.code === 200) {
          const { hasCreate } = res.data;
          this.canCreate = !!hasCreate;
        }
      }).catch(_ => {
        this.approvalExportList = [];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mobile-detail-wrap {
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    background-color: #406EFF !important;
    .mobile-text {
      color: #fff !important;
    }
  }
  ::v-deep {
    .mobile-icon {
      margin-left: 8px;
    }
  }
}
.mobile-margin-top {
  margin-top: 60px !important;
}
.detail-container {
  margin: 16px;
  background: #FFFFFF;
  min-height: calc(100vh - 80px);
}
.detail-content {
  position: relative;
  padding: 0 24px 56px;
  margin-top: 12px;
}
.revoke-img{
  position: absolute;
  width: 80px;
  height: 80px;
  right: 56px;
  top: 33px;
  z-index: 999;
}
.submit-btn {
  width: 80px;
  padding: 0;
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  padding: 7px 16px;
  img {
    width: 16px;
    margin-left: 3px;
  }
}
.header-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding-right: 16px;
  padding-left: 16px;
  height: 48px;
  .title {
    font-size: 16px;
    line-height: 1.5;
    font-family: PingFang SC;
    color: #333333;
  }
  .flex-1 {
    flex: 1;
  }
}
.scroll {
  flex-wrap: wrap;
  @include scrollBar($x: auto, $y: hidden);
}
.drawer-style {
  margin: 0;
  ::v-deep {
    .pagination-flex {
      width: 650px !important;
      margin: 0;
      padding: 0;
    }
    .card-file-container {
      padding-top: 0;
    }
  }
}
</style>
